<template>
  <!-- 脚贴 -->
  <div class="home_index">
    <div class="title_style">专业技能</div>
    <div class="skill_style">
      <div class="flex_box" v-for="item in skilldata" :key="item">
        <div class="skill-name">
          <div>{{ item.name }}</div>
          <div>{{ item.percentage }}</div>
        </div>
        <!-- 进度条1-->
        <div v-show="item.id == 1" class="progress1">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 2" class="progress2">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 3" class="progress3">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 4" class="progress4">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 5" class="progress5">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 6" class="progress6">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 7" class="progress7">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 8" class="progress8">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 9" class="progress9">
          <div class="loader-container0"></div>
        </div>
        <div v-show="item.id == 10" class="progress10">
          <div class="loader-container0"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loadercontainer: "loader-container",
      progress: "progress",
      skilldata: [],
    };
  },
  methods: {
    getInitData() {
      this.skilldata = [
        { name: "JS/ES5/ES6", percentage: "精通", id: 1 },
        { name: "HTML/H5", percentage: "精通", id: 2 },
        { name: "CSS/CSS3", percentage: "精通", id: 3 },
        { name: "VUE框架", percentage: "掌握", id: 4 },
        { name: "JAVA", percentage: "熟悉", id: 5 },
        { name: "MYSQL数据库", percentage: "熟悉", id: 6 },
        { name: "LINUX/NGINX", percentage: "熟悉", id: 7 },
        { name: "NPM/GIT工具", percentage: "熟悉", id: 8 },
        { name: "CANVAS/动画", percentage: "了解", id: 9 },
        { name: "WEBPACK", percentage: "了解", id: 10 },
      ];
    },
  },
  mounted() {
    this.getInitData();
  },
};
</script> 

<style   lang='scss'scoped>
@import "../styles/variable";

@media screen and (max-width: 799px) {
  .home_index {
    background: #eee;
    width: 100%;
    height: auto;
    padding: 12vh 0px;
    // margin-bottom: 20vh;
    .title_style {
      font-weight: 700;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .skill_style {
      margin: auto;
      width: 80%;
      height: auto;
      background: white;
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .flex_box {
        margin: 15px 0px;
        .skill-name {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .skill_style_title {
        @include progress;
        background: white;
      }
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      .progress1 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 85%;
          animation: loader1 2s linear;
          animation-timing-function: ease;
        }
      }
      .progress2 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 90%;
          animation: loader2 10s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress3 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 80%;
          animation: loader3 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress4 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 80%;
          animation: loader4 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress5 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 65%;
          animation: loader5 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress6 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 60%;
          animation: loader6 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress7 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 50%;
          animation: loader7 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress8 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 30%;
          animation: loader8 2s linear;
          animation-timing-function: ease;
          // animation-delay:2s;
        }
      }
      .progress9 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 30%;
          animation: loader9 2s linear;
          animation-timing-function: ease;
          // animation-delay:2s;
        }
      }
      .progress10 {
        @include progress;
        .loader-container0 {
          @include progress_hight;
          width: 30%;
          animation: loader10 2s linear;
          animation-timing-function: ease;
          // animation-delay:2s;
        }
      }
    }
  }
}
@media screen and (min-width: 800px) {
  .home_index {
    background: #eee;
    width: 100%;
    height: auto;
    padding: 20vh 0px;
    margin-bottom: 10vh;
    .title_style {
      font-weight: 700;
      font-size: 1.714em;
      margin-bottom: 50px;
    }
    .skill_style {
      margin: auto;
      width: 70%;
      height: auto;
      background: white;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .flex_box {
        margin: 30px 0px;
        .skill-name {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .skill_style_title {
        @include progressPC;
        background: white;
      }
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      .progress1 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 85%;
          animation: loader1 2s linear;
          animation-timing-function: ease;
        }
      }
      .progress2 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 90%;
          animation: loader2 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress3 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 80%;
          animation: loader3 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress4 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 80%;
          animation: loader4 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress5 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 65%;
          animation: loader5 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress6 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 60%;
          animation: loader6 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress7 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 50%;
          animation: loader7 2s linear;
          animation-timing-function: ease;

          // animation-delay:2s;
        }
      }
      .progress8 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 30%;
          animation: loader8 2s linear;
          animation-timing-function: ease;
          // animation-delay:2s;
        }
      }
      .progress9 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 30%;
          animation: loader9 2s linear;
          animation-timing-function: ease;
          // animation-delay:2s;
        }
      }
      .progress10 {
        @include progressPC;
        .loader-container0 {
          @include progress_hight;
          width: 30%;
          animation: loader10 2s linear;
          animation-timing-function: ease;
          // animation-delay:2s;
        }
      }
    }
  }
}
@keyframes loader1 {
  0% {
    width: 0%;
  }
  100% {
    width: 85%;
  }
}
@keyframes loader2 {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}
@keyframes loader3 {
  0% {
    width: 0%;
  }
  100% {
    width: 60%;
  }
}

@keyframes loader4 {
  0% {
    width: 0%;
  }
  100% {
    width: 80%;
  }
}
@keyframes loader5 {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
@keyframes loader6 {
  0% {
    width: 0%;
  }
  100% {
    width: 65%;
  }
}
@keyframes loader7 {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
@keyframes loader8 {
  0% {
    width: 0%;
  }
  100% {
    width: 30%;
  }
}
@keyframes loader9 {
  0% {
    width: 0%;
  }
  100% {
    width: 30%;
  }
}
@keyframes loader10 {
  0% {
    width: 0%;
  }
  100% {
    width: 30%;
  }
}
</style>